<template>
  <view>
  <view>
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <!-- 循环渲染轮播图的 item 项 -->
      <swiper-item v-for="(item, i) in list" :key="i">
        <navigator class="swiper-item" :url="`/subpkg/goods_detail/goods_detail?goods_id=${item.goods_id}`">
          <!-- 动态绑定图片的 src 属性 -->
          <image :src="item.image_src"></image>
        </navigator>
      </swiper-item>
    </swiper>
  </view>
  <!-- 分类导航 -->
<!-- 分类导航区域 -->
 <view class="nav-list">
     <view class="nav-item" v-for="(item, i) in fen" :key="i" @click="fenlei(item)">
       <image class="nav-img" :src="item.image_src"></image>
     </view>
  </view>
  <!-- 图片列表 -->
  <view class="zuiwai">
    <view class="quanbu">
      <view>
      <view  v-for="(item,i) in arr" :key="i">
        <image :src="item.floor_title.image_src" class="ding" ></image>
        <view class="a">
        <navigator class="zuo"  :url="item.product_list[0].url">
          <image :src="item.product_list[0].image_src" mode="widthFix" :style="{width: item.product_list[0].image_width+'rpx'}"></image>
        </navigator>
        <view class="you">
          <navigator class="youhe" v-for="(item1,i1) in item.product_list" :key="i1" v-if="i1!==0" :url="item1.url">
            <image :src="item1.image_src" mode="widthFix" :style="{width: item1.image_width+'rpx'}"></image>
          </navigator>
        </view>
         </view>
      </view>
      
      </view>
    </view>
    
  </view>
</view>

</template>

<script>
	export default {
		data() {
			return {
				list:[],//轮播图数据
        fen:[],//分类导航区域
        arr:[],//楼层的数据列表
      
			};
		},
    onLoad(){
      // 在小程序刚加载的时候就发送请求
      this.getlist()
      this.getfen()//分类导航区域
      this.getarr()
  
    },
    methods:{
     async getlist() {//轮播图请求
       const {data: res}=await uni.$http.get('/home/swiperdata')
       console.log(res)
       if(res.meta.status!==200){
         return uni.showToast({
           title:res.meta.msg,
           duration:1500,
           icon:'none'
         })
       }
       this.list=res.message
     },
     async getfen(){//获取分类导航
        const { data: res } = await uni.$http.get('/home/catitems')
         console.log(res)
        if(res.meta.status!==200) return uni.$showMsg()
        this.fen=res.message
     },
     async getarr(){
       const {data:res}=await uni.$http.get('/home/floordata')
       if(res.meta.status!==200) return uni.$showMsg()
       // 通过双层 forEach 循环，处理 URL 地址
       res.message.forEach(floor => {
         floor.product_list.forEach(prod => {
           prod.url = '/subpkg/good_list/good_list?' + prod.navigator_url.split('?')[1]
           // prod.url = `/subpkg/goods_list?${prod.navigator_url.split('?')[1]}` // 模版字符串写法
         })
       })
       this.arr=res.message
     },

     fenlei(item){//分类进入事件
       // console.log(item)
       if(item.name==='分类'){
         uni.switchTab({
           url:'/pages/cate/cate'
         })
       }
     }
    }
	}
  
</script>

<style lang="scss">
swiper {
    height: 330rpx;

    .swiper-item,
    image {
      width: 100%;
      height: 100%;
    }
  }
  .nav-list {
    display: flex;
    justify-content: space-around;
    margin: 15px 0;
    .nav-img {
      width: 128rpx;
      height: 140rpx;
    }
  }
  .ding{
    height: 60rpx;
    width: 100%;
    display: flex;
  }
  .zuo image{
    padding-left: 10rpx;
  }
  .you{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    
  }
 .youhe{
   display: flex;
  
 }
 .a{
   display: flex;
 }
  
</style>
